<template>
  <div id="app">
    <!-- 头部区 -->
    <v-header :seller="seller"></v-header>
    <!--导航区-->
    <div class="tab">
      <div class="tab-item">
        <router-link :to="{name: 'goods', params: {id: id}}">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link :to="{name: 'ratings', params: {id: id}}">评价</router-link>
      </div>
      <div class="tab-item">
        <router-link :to="{name: 'seller', params: {id: id}}">商家</router-link>
      </div>
    </div>
    <!--路由显示区-->
    <keep-alive>
      <router-view :seller="seller"></router-view>
    </keep-alive>
  </div>
</template>

<script>
  /*   有AJAX*/
  import Header from 'components/header/header'
  import {urlParse} from 'common/js/urlparse'
  const ERR_OK = 0
  export default {
    name: 'app',
    data() {
      return {
        seller: {
          /*id:(() => {
            let queryParam = urlParse()
            console.log(queryParam.id)
            return queryParam.id
          })()*/
        },
        id: 1234
      }
    },
    components: {
      'v-header': Header
    },
    methods: {
      getSellerData() {
        this.$http.get('/api/seller/' + this.$route.params.id).then(res => {
          if (res.data.errno === ERR_OK) {
            this.seller = res.data.data
          }
        })
      }
    },
    mounted() {
      this.getSellerData()

    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  #app {
    .tab {
      display: flex;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      border-bottom: 1px solid rgba(7,17,27,0.1);
      .tab-item {
        flex: 1;
        text-align: center;
        a {
          display: block;
        }
        .router-link-active {
          color: rgb(240,20,20);
        }
      }
    }
  }
</style>
